<template>
  <div class="activityDetails">
    <top-bar :title="'活动详情'"/>
    <div class="content" v-html="newsDetail.content">
      <!-- {{description}} -->
    </div>
    <div style="text-align: center;">
      <button @click="skipApp">去app申请奖励</button>
    </div>
  </div>
</template>

<script>
  import topBar from './topBar'
  export default {
    name: "activityDetails",
    components: {
      topBar
    },
    data() {
      return {
        description: '这里是活动详情的所有内容描述'
      }
    },
    computed: {
      newsDetail () {
        return this.$store.state.newsDetail || {}
      }
    },
    methods: {
      skipApp() {
        console.log("跳转到app");
      }
    },
    created() {
      let { id } = this.$route.params
      this.$store.dispatch('getNewsDetail', id)
    }
  }
</script>

<style lang="scss" scoped>
  .activityDetails {
    padding: 0.75rem 0.48rem;
    .content {
      margin-top: 0.64rem;
      height: 7.84rem;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 0.27rem;
      padding: 0.4rem 0.37rem;
      font-size: 0.32rem;
      font-weight: 400;
      color: #888888;
      word-wrap: break-word;
      word-break: break-all;
      overflow: scroll;
    }
    button {
      width: 8.13rem;
      height: 1.2rem;
      background: #FF751A linear-gradient(90deg, #FF0000 0%, #FFD500 100%);
      border-radius: 0.67rem;
      font-size: 0.45rem;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #FFFFFF;
      margin-top: 0.43rem;
    }
  }
</style>
